<template>
  <div ref="echartRef" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { DataZoomComponent } from 'echarts/components'

// 注册 DataZoomComponent
echarts.use([DataZoomComponent])
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
// console.log('指标落实率', props.data)
const echartRef = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(echartRef.value)
  // 渲染 echarts
  renderChart()
})
const renderChart = () => {
  const tooltipData = props.data.map((item) => {
    return {
      name: item.name,
      rate: item.rate + '%',
      ringRatio: item.tend,
    }
  })
  // const max = Math.max(...barData)
  // let bgData = new Array(barData.length).fill(100)
  const data = {
    categories: props.data.map((item) => item.name),
    barData: props.data.map((item) => item.rate), // 落实率
    lineData: props.data.map((item) => item.tend), // 环比，这里简化为100
    tooltipData: tooltipData,
  }
  const option = {
    backgroundColor: '#2a2a2a', // 暗色主题背景
    grid: {
      left: '5%',
      right: '1%',
      // bottom: '5%',
      // top: '5%',
      // containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      backgroundColor: 'rgba(252, 231, 100, 0.40)',
      borderColor: 'rgba(252, 231, 100, 1)',
      textStyle: {
        color: '#fff', // 设置 tooltip 文字颜色
      },
      formatter: function (params) {
        const category = params[0].name
        const tooltipData = data.tooltipData.find((item) => item.name === category)
        return `
        <div>
          <p><strong>指标落实率</strong></p>
          <p>指标：${tooltipData.name}</p>
          <p>落实率：${tooltipData.rate}</p>
          <p>环比：${tooltipData.ringRatio}</p>
        </div>
      `
      },
    },
    legend: {
      data: ['落实率', '环比'],
      right: '10',
      top: '10',
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      data: data.categories,
      axisLabel: {
        color: '#fff',
        interval: 0,
        overflow: 'truncate', // 设置标签溢出显示省略号
        width: 40, // 设置标签宽度
        // rotate: 45,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 106, 58, .5)',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed', // 设置分割线为虚线
          color: 'rgba(255, 106, 58, .15)',
        },
      },
    },
    dataZoom: [
      {
        type: 'slider', // 滑动条型数据区域缩放组件
        show: true,
        zoomLock: true, // 禁止缩放
        // xAxisIndex: [0],
        start: 0, // 初始显示的数据范围（百分比）
        end: 50, // 初始显示的数据范围（百分比）
        backgroundColor: 'rgba(255, 213, 75, .5)',
        brushSelect: false,
      },
    ],
    series: [
      {
        name: '落实率',
        type: 'bar',
        data: data.barData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 88, 65, 1)' },
            { offset: 1, color: 'rgba(255, 213, 75, 1)' },
          ]),
          barBorderRadius: [10, 10, 0, 0],
        },
        // zlevel: 10, // 设置柱子层级
        barWidth: '15%',
        label: {
          show: true,
          offset: [0, 30],
          position: 'top',
          formatter: '{bg|}',
          rich: {
            bg: {
              backgroundColor: {
                // image: '@/assets/images/deliver/button_bg.png',
                image: new URL('@/assets/images/deliver/doc-2.svg', import.meta.url).href,
              },
              height: 40,
              width: 40,
            },
            text: {
              color: '#fff',
              fontSize: 14,
              align: 'left',
              verticalAlign: 'bottom',
              padding: [0, 0, -10, 5],
            },
          },
        },
      },
      {
        name: '环比',
        type: 'line',
        data: data.lineData,
        smooth: true,
        itemStyle: {
          color: '#ffd700',
        },
        lineStyle: {
          width: 2,
        },
        // tooltip: {
        //   show: false,
        // },
      },
    ],
  }
  mChart.setOption(option)
}
watch(
  () => props.data,
  () => {
    renderChart()
  },
)
</script>
